<template>
  <div class="content">
    <a-row type="flex" style="margin-bottom: 30px;">
      <div>总输入</div>
      <a-textarea
        v-model="inputAll"
        :auto-size="{ minRows: 3 }"
        placeholder="总公式"
        style="width: 90%;"
      />
    </a-row>

    <a-modal
    width="60%"
      v-model="modelShow"
      title="Modal"
      ok-text="确认"
      cancel-text="取消"
      @ok="hideModal"
    >
      <a-textarea v-model="json" :auto-size="{ minRows: 3 }" />
    </a-modal>

    <a-row :gutter="20">
      <a-col span="8">
        <div>
          <div class="bindingbtn">
            <span>{{ zs1 }}</span>
            <a-tree-select
              v-model="value1"
              style="width: 80%;margin-bottom: 6px;"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="treeData1"
              placeholder="请选择"
              tree-default-expand-all
            >
            </a-tree-select>

            <a-row>
              <a-button @click="changeModelShow('1')">上传json</a-button>
              <a-input
                placeholder="注释"
                v-model="zs1"
                style="width: 19%;"
              ></a-input>
            </a-row>
          </div>
        </div>
      </a-col>
      <a-col span="8">
        <div class="binding">
          <div class="bindingbtn">
            <span>{{ zs2 }}</span>
            <a-tree-select
              v-model="value2"
              style="width: 80%;margin-bottom: 6px;"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="treeData2"
              placeholder="请选择"
              tree-default-expand-all
            >
            </a-tree-select>

            <a-row>
              <a-button @click="changeModelShow('2')">上传json</a-button>
              <a-input
                placeholder="注释"
                v-model="zs2"
                style="width: 19%;"
              ></a-input>
            </a-row>
          </div>
        </div>
      </a-col>

      <a-col span="8">
        <div class="binding">
          <div class="bindingbtn">
            <span>{{ zs3 }}</span>
            <a-tree-select
              v-model="value3"
              style="width: 80%;margin-bottom: 6px;"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="treeData3"
              placeholder="请选择"
              tree-default-expand-all
            >
            </a-tree-select>

            <a-row>
              <a-button @click="changeModelShow('3')">上传json</a-button>
              <a-input
                placeholder="注释"
                v-model="zs3"
                style="width: 19%;"
              ></a-input>
            </a-row>
          </div>
        </div>
      </a-col>
    </a-row>

    <!-- <a-tree-select
      v-model="value1"
      style="width: 100%;"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
      :tree-data="treeData1"
      placeholder="请选择"
      tree-default-expand-all
    >
    </a-tree-select> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      jsonObj: {
        ybnsrfb1: {
          zzszp: {
            bf13hwlwynse: "13%税率的货物及加工修理修配劳务销项(应纳)税额",
            bf13fwbdcxse: "13%税率的服务、不动产和无形资产销售额",
          },
          zzspp: {
            bf13hwlwxse: "开具其他发票--13%税率的货物及加工修理修配劳务销售额",
            bf13hwlwynse: "13%税率的货物及加工修理修配劳务销项(应纳)税额",
            bf13fwbdcxse: "13%税率的服务、不动产和无形资产销售额",
            bf13fwbdcynse: "13%税率的服务、不动产和无形资产销项(应纳)税额",
          },
        },
        ybnsrfb2: {
          hzzyfpjxse: "红字专用发票信息表注明的进项税额:附表二第20栏税额",
          zzsfprzfs: "本期认证相符的增值税专用发票份数：附表二第35栏份数",
          zzsfprzje: "本期认证相符的增值税专用发票金额：附表二第35栏金额",
          zzsfprzse: "本期认证相符的增值税专用发票税额：附表二第35栏税额",
        },
        jmsmxb: {
          jsxm: [
            {
              jsxzdm: "减免性质代码",
              bqfse: "本期发生额",
              bqsjdjse: "本期实际抵减税额",
            },
          ],
          msxm: [
            {
              msxzdm: "免税性质代码",
              mzzzsxmxse: "免征增值税项目销售额",
            },
          ],
        },
      },
      jsonObj2: {
        a: 1,
        b: "qqq",
        c2: 3,
        d5: false,
      },
      inputAll: "",
      modelShow: false,
      json: "",
      modelIndex: "",

      zs1: "",
      treeData1: [],
      value1: undefined,

      zs2: "",
      treeData2: [],
      value2: undefined,

      zs3: "",
      treeData3: [],
      value3: undefined,
    };
  },
  created() {
    /** 
    const keyify = (obj, prefix = "") =>
      Object.keys(obj).reduce((res, el) => {
        // debugger
        if (Array.isArray(obj[el])) {
          console.log("----------", res);
          let newObj = {
            title: el,
            key: prefix + el + "[@].",
            value: prefix + el + "[@].",
            disabled: true,
            children: keyify(obj[el][0], prefix + el + "[@]."),
          };
          res.push(newObj);
          return [...res];
        } else if (typeof obj[el] === "object" && obj[el] !== null) {
          console.log("----------", res);
          let newObj = {
            title: el,
            key: prefix + el + ".",
            value: prefix + el + ".",
            disabled: true,
            children: keyify(obj[el], prefix + el + "."),
          };
          res.push(newObj);
          return [...res];
        } else {
          let newObj = {
            key: prefix + el,
            value: prefix + el,
            title: obj[el],
          };
          res.push(newObj);
          return [...res];
        }
      }, []);

    */
    // this.treeData1 = this.keyify(this.jsonObj, "");
  },
  methods: {
    // 将对象转换成数组
    keyify(obj, prefix) {
      let newArrey = Object.keys(obj).reduce((res, el) => {
        // debugger
        if (Array.isArray(obj[el])) {
          console.log("----------", res);
          let newObj = {
            title: el,
            key: prefix + el + "[@].",
            value: prefix + el + "[@].",
            disabled: true,
            children: this.keyify(obj[el][0], prefix + el + "[@]."),
          };
          res.push(newObj);
          return [...res];
        } else if (typeof obj[el] === "object" && obj[el] !== null) {
          console.log("----------", res);
          let newObj = {
            title: el,
            key: prefix + el + ".",
            value: prefix + el + ".",
            disabled: true,
            children: this.keyify(obj[el], prefix + el + "."),
          };
          res.push(newObj);
          return [...res];
        } else {
          let newObj = {
            key: prefix + el,
            value: prefix + el,
            title: obj[el],
          };
          res.push(newObj);
          return [...res];
        }
      }, []);
      console.log('++++',newArrey)
      return newArrey;
    },
    // 显示遮罩
    changeModelShow(index) {
      this.modelIndex = index;
      this.modelShow = true;
    },
    hideModal() {
      if (this.modelIndex == 1) {
        this.treeData1 = this.keyify(JSON.parse(this.json),"");
        console.log(this.treeData1)
      } else if (this.modelIndex == 2) {
        this.treeData2 = this.keyify(JSON.parse(this.json),"");
      } else if (this.modelIndex == 3) {
        this.treeData3 = this.keyify(JSON.parse(this.json),"");
      }
      this.modelShow = false;
    },
  },
  watch: {
    value1(value) {
      console.log(value);
      this.inputAll = this.inputAll + value;
    },
    value2(value) {
      console.log(value);
      this.inputAll = this.inputAll + value;
    },
    value3(value) {
      console.log(value);
      this.inputAll = this.inputAll + value;
    },
  },
};
</script>
<style scoped>
.content {
  padding: 30px;
}
</style>